<template>
	<HeaderModule></HeaderModule>
	<div class="roombox">
		<el-row :gutter="10">
			<!-- 左边 -->
			<el-col :span="4">
				<!-- 练习室 -->
				<el-card shadow="always">
					<el-menu default-active="1-1">
						<el-sub-menu
							class="ResourceDynamicItem"
							index="1"
							:class="{ active: flag == 1 }"
						>
							<template #title>
								<div class="betray" :class="{ active: flag == 1 }">
									<span>练习室</span>
								</div>
							</template>
							<el-menu-item @click="hanlderroom" index="1-1"
								>我的练习室</el-menu-item
							>
						</el-sub-menu>
					</el-menu>
				</el-card>
				<!-- 缓存 -->
				<el-card shadow="always" style="margin-top: 10px">
					<div class="listContainer">
						<div class="listItem" :class="{ active: flag == 3 }">
							<span>缓存</span>
						</div>
						<div class="listItem" :class="{ active: flag == 4 }">
							<span>音频库</span>
						</div>
						<div
							class="listItem"
							@click="storehandler"
							:class="{ active: flag == 5 }"
						>
							<span>收藏</span>
						</div>
						<div
							class="listItem"
							@click="handlerhistory"
							:class="{ active: flag == 2 }"
						>
							<span>历史</span>
						</div>
					</div>
				</el-card>
			</el-col>
			<!-- 右边 -->
			<el-col :span="20">
				<router-view></router-view>
			</el-col>
		</el-row>
	</div>
	<FooterModule></FooterModule>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router"
// 引入接口
import { reqRoomList } from "../../api/room/index"
let router = useRouter()
const flag = ref<number>(1)
// 点击切换练习室组件
const hanlderroom = () => {
	flag.value = 1
	// 跳转路由
	router.push("/room/myroom")
}
// 点击切换收藏组件
const storehandler = () => {
	// 跳转路由
	router.push({
		path: "/room/store",
	})
}
// 点击切换历史记录
const handlerhistory = () => {
	flag.value = 2
	// 跳转路由
	router.push("/room/history")
}
// 挂载时发送请求,获取练习室全部数据
onMounted(() => {
	getRoomList()
})

//练习室全部数据
const getRoomList = () => {
	// const result = reqRoomList()
}
</script>

<style scoped>
.roombox {
	margin: 0 auto;
	width: 1200px;
	margin-top: 20px;
}

>>> .el-row {
	width: 1200px;
}

.el-menu {
	border-right: none !important;
	margin-left: -20px !important;
}

.el-menu span {
	margin-left: 3px !important;
}

.el-menu-item {
	height: 40px;
	margin-left: 35px !important;
}

.el-menu-item.is-active {
	color: #f93684 !important;
}

.el-sub-menu__title {
	height: 42px !important;
}

.el-sub-menu__title {
	background-color: white !important;
}

.ResourceDynamicItem .betray {
	padding-left: 20px;
}

.ResourceDynamicItem .active {
	border-left: 3px solid #f93684;
}

>>> .el-card__body {
	padding: 0;
}

.listContainer {
	height: 210px;
}

.listContainer .listItem {
	height: 45px;
	border-left: 3px solid white;
}

.listContainer .listItem:hover {
	border-left: 3px solid #f93684;
}

.listContainer .active {
	border-left: 3px solid #f93684;
}

.listContainer .listItem span {
	font-size: 14px;
	color: #111;
	padding: 17px 21px;
	cursor: pointer;
	position: relative;
	display: block;
	text-decoration: none;
}
</style>
